import React, {Component} from 'react';
import {View, Text, Image, StyleSheet, ImageBackground} from 'react-native';
import {List, Button, Flex, Tabs} from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';
import {ScrollView} from 'react-native-gesture-handler';
import {ownerPackageList, createTakeOrder, getOrderInfoByItemID} from '~/api/order';
import {ownerTakeOrderList} from '~/api/parking';
import {getGiftList} from '~/api/owner';
import {getHttpUrl} from '~/api/basic';
let pagecount = 0;
let index = 1;
let size = 10;
class myGift extends Component {
    static navigationOptions = {
        title: '我的赠品',
    };
    constructor(props) {
        super(props);
        this.state = {
            packagelist: [],
            giftlist: [],
            baseurl: '',
            page_index: 1,
            page_size: 10,
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
            tabinfo: 0,
            tabs: [
                {title: '我的奖品', value: 0},
                {title: '车位赠品', value: 1},
            ],
        };
        this.TabClick = this.TabClick.bind(this);
        getHttpUrl().then((r) => {
            if (r.code === 0) {
                this.setState({
                    baseurl: r.data,
                });
            }
        });
    }
    TabClick(tab) {
        this.state.tabinfo = tab.value;
        this.setState(
            {
                page_index: index, //页
                page_size: size, //每页条数
            },
            () => {
                this.GetList();
            },
        );
    }
    GetList() {
        if (this.state.tabinfo === 0) {
            //引流赠品
            getGiftList().then((r) => {
                if (r.code === 0) {
                    this.setState({
                        giftlist: r.data,
                    });
                } else {
                    console.log(r.msg);
                }
            });
        } else {
            //车位赠品
            ownerTakeOrderList().then((r) => {
                if (r.code === 0) {
                    this.setState({
                        packagelist: r.data,
                    });
                } else {
                    console.log(r.msg);
                }
            });
        }
    }
    render() {
        return (
            <View style={{flex: 1}}>
                <Tabs
                    tabs={this.state.tabs}
                    prerenderingSiblingsNumber={0}
                    onChange={this.TabClick}
                    tabBarActiveTextColor={'#ec4f46'}
                    tabBarUnderlineStyle={{backgroundColor: '#ec4f46', width: '10%', marginLeft: '15%'}}>
                    <ScrollView>
                        <View>
                            {this.state.tabinfo === 0 &&
                                this.state.giftlist.map((item) => {
                                    return (
                                        <Flex
                                            onPress={() => {
                                                this.props.navigation.push('PackageOrder', {
                                                    itemId: item.OrderItemID,
                                                    ownerGiftID: item.OwnerGiftID,
                                                    giftType: 1, //1引流礼品  2车位礼品
                                                    giftstate: item.TakeOrderDataID === 0 ? 0 : 1, //0礼物未领取  1礼物已领取
                                                    takeOrderDataId: item.TakeOrderDataID,
                                                });
                                            }}
                                            style={styles.card}>
                                            <Image
                                                style={{
                                                    width: '20%',
                                                    aspectRatio: 1 / 1,
                                                    margin: 10,
                                                }}
                                                source={{uri: this.state.baseurl + item.ProductImage}}
                                            />
                                            <View style={{width: '50%'}}>
                                                <Text numberOfLines={1}>{item.ProjectName}</Text>
                                                <Text numberOfLines={1}>{item.ProductName}</Text>
                                            </View>
                                            <Flex style={{height: '100%'}} align={'start'}>
                                                <Text
                                                    onPress={() => {
                                                        this.props.navigation.push('PackageOrder', {
                                                            itemId: item.OrderItemID,
                                                            ownerGiftID: item.OwnerGiftID,
                                                            giftType: 1, //1引流礼品  2车位礼品
                                                            giftstate: item.TakeOrderDataID === 0 ? 0 : 1, //0礼物未领取  1礼物已领取
                                                            takeOrderDataId: item.TakeOrderDataID,
                                                        });
                                                    }}
                                                    style={{
                                                        fontSize: 14,
                                                        width: 80,
                                                        height: 30,
                                                        borderWidth: 1,
                                                        borderColor: '#ec4f46',
                                                        borderRadius: 15,
                                                        color: '#ec4f46',
                                                        textAlign: 'center',
                                                        paddingTop: 5,
                                                        marginLeft: 5,
                                                        marginTop: 20,
                                                    }}>
                                                    {item.TakeOrderDataID === 0 ? '未领取' : '已领取'}
                                                </Text>
                                            </Flex>
                                        </Flex>
                                    );
                                })}
                            {this.state.tabinfo === 1 &&
                                this.state.packagelist.map((item) => {
                                    return (
                                        <View style={styles.backbcard}>
                                            <Flex
                                                onPress={() => {
                                                    this.props.navigation.push('PackageOrder', {
                                                        parkingOrderId: item.ParkingOrderID,
                                                        orderId: item.OrderDataID,
                                                        takeOrderId: item.TakeOrderDataID,
                                                        giftType: 2, //1引流礼品  2车位礼品
                                                        giftstate: item.TakeOrderDataID === 0 ? 0 : 1, //0礼物未领取  1礼物已领取
                                                        takeOrderDataId: item.TakeOrderDataID,
                                                    });
                                                }}
                                                direction={'column'}
                                                style={{
                                                    width: '100%',
                                                    paddingTop: '2%',
                                                    paddingBottom: 10,
                                                }}>
                                                <Flex
                                                    style={{
                                                        width: '100%',
                                                        paddingLeft: 15,
                                                        paddingRight: 15,
                                                        paddingTop: 7,
                                                    }}
                                                    justify={'between'}>
                                                    <Text style={{color: '#666666', fontWeight: 'bold'}}>
                                                        {item.BuildingName}
                                                        {item.AreaName}
                                                        {item.ParkingName}
                                                    </Text>
                                                    <Text
                                                        onPress={() => {
                                                            this.props.navigation.push('PackageOrder', {
                                                                parkingOrderId: item.ParkingOrderID,
                                                                orderId: item.OrderDataID,
                                                                takeOrderId: item.TakeOrderDataID,
                                                                giftType: 2, //1引流礼品  2车位礼品
                                                                giftstate: item.TakeOrderDataID === 0 ? 0 : 1, //0礼物未领取  1礼物已领取
                                                                takeOrderDataId: item.TakeOrderDataID,
                                                            });
                                                        }}
                                                        style={{
                                                            fontSize: 14,
                                                            width: 80,
                                                            height: 30,
                                                            borderWidth: 1,
                                                            borderColor: '#ec4f46',
                                                            borderRadius: 15,
                                                            color: '#ec4f46',
                                                            textAlign: 'center',
                                                            paddingTop: 5,
                                                            marginLeft: 5,
                                                        }}>
                                                        {item.TakeOrderDataID === 0 ? '未领取' : '已领取'}
                                                    </Text>
                                                </Flex>
                                                <View style={{width: '100%', height: 1, backgroundColor: '#EEEEEE', marginTop: 10}} />
                                                <Flex
                                                    // onPress={() => {
                                                    //     this.props.navigation.push('GiftList', {
                                                    //         params: item.OrderDataID,
                                                    //     });
                                                    // }}
                                                    style={{width: '100%'}}>
                                                    <View style={{paddingRight: 20, width: '30%', padding: 10}}>
                                                        <Image
                                                            style={{width: '100%', height: 75, aspectRatio: 1 / 1}}
                                                            source={require('~/assets/public/packagegift.png')}
                                                        />
                                                    </View>
                                                    <Flex style={{width: '70%', paddingRight: 15, marginTop: 20}} justify={'between'}>
                                                        <View style={{width: '85%'}}>
                                                            <Flex>
                                                                <Text style={{fontSize: 15, fontWeight: 'bold'}}>{item.PackageName}</Text>
                                                                <Text
                                                                    style={{borderRightWidth: 1, width: 2, height: 15, marginLeft: 5, marginRight: 5}}
                                                                />
                                                                <Text style={{fontSize: 15, color: '#ec4f46'}}>{item.PriceMarketTotal}元</Text>
                                                            </Flex>
                                                            <Text numberOfLines={2} style={{color: 'gray', fontSize: 10}}>
                                                                冰箱，洗衣机，空调，电视机，茶几阿斯利康解放拉萨的解放拉萨的解放拉萨
                                                            </Text>
                                                        </View>
                                                    </Flex>
                                                </Flex>
                                            </Flex>
                                        </View>
                                    );
                                })}
                        </View>
                    </ScrollView>
                </Tabs>
            </View>
        );
    }
}
export default myGift;

const styles = StyleSheet.create({
    backbcard: {
        width: '96%',
        marginLeft: '2%',
        marginTop: 10,
        backgroundColor: 'white',
        borderRadius: 10,
        paddingBottom: 10,
    },
    typename: {
        color: 'gray',
        paddingLeft: 10,
        paddingTop: 10,
        fontSize: 18,
        fontWeight: 'bold',
    },
    card: {
        width: '94%',
        borderRadius: 10,
        marginTop: 10,
        backgroundColor: '#ffffff',
        height: 100,
        marginLeft: '3%',
    },
});
